import React from 'react';
import "./index.css";
import "../../Common/css/common.css"
import Blank from '../Blank'
import { Button } from 'antd';
import Order from "../../Common/svg/Order";
import Modify from '../../Common/svg/Modify';

export default class Good extends React.Component{
    constructor (props){
        super();
        this.state={
            data:props.data,
            insurance:props.insurance,
            guaranteeMoney:props.guaranteeMoney,
            ca:props.ca,
            heart:props.heart,
            bag:props.bag,
            modify:props.modify,
            delete:props.delete,
            confirmBtn:props.confirmBtn,
            order:props.order,
            header:props.header,
            name:props.name,
            desc:props.desc,
            price:props.price,
            time:props.time,
            state:props.state,

            img:props.img
            
        }
    }
    render(){
        return(
            <div className="GoodBox">
                <div className="flexContainer">
                    <img width="40px" height="40px" alt="portrait" src={this.state.header}/>
                    <Blank/>
                    {this.state.insurance?<span className="GoodBox_Ext_Msg"><img alt="Insurance" src="/assets/Good/Insurance.png" className="GoodBox_Ext_Msg"/></span>:""}
                    {this.state.guaranteeMoney?<span className="GoodBox_Ext_Msg"><img alt="GuaranteeMoney"  src="/assets/Good/GuaranteeMoney.png" className="GoodBox_Ext_Msg"/></span>:""}
                    {this.state.order?<span className="GoodBox_Ext_Msg"><Order/></span>:""}
                </div>
                <div className="middle GoodDronePic">
                    <img className="GoodBox_MainPic" alt="drone"  src={this.state.img!==undefined?this.state.img:"/assets/Drone/drone.png"}/>
                </div>
                <div className="GoodBox_Name">{this.state.name}</div>
                <div className="GoodBox_Desc">{this.state.time}</div>
                <div className="GoodBox_Desc">{this.state.desc}</div>
                <div className="GoodBox_Desc">{this.state.state}</div>
                
                <div className="flexContainer">
                    <span className="GoodBox_Money">￥{this.state.price}</span>
                    <Blank/>
                    {this.state.modify?<span className="Good_Bottom_Margin GoodBox_Btn"><Modify/></span>:""}
                    {this.state.heart?<span className="Good_Bottom_Margin"><img alt="heart"  src="/assets/Good/heart.png" className="GoodBox_Btn"/></span>:""}
                    {this.state.bag?<span className="Good_Bottom_Margin"><img alt="bag"  src="/assets/Good/bag.png" className="GoodBox_Btn"/></span>:""}
                    {this.state.delete?<span className="Good_Bottom_Margin"><img className="Drone_DeleteImg" src="/assets/CA/delete.png" alt="delete" /></span>:""}
                    {this.state.confirmBtn!==undefined?<span className="Good_Bottom_Margin"><Button type="primary" shape="round" size="small">{this.state.confirmBtn}</Button></span>:""}
                </div>
            </div>
        );
    }
}
